<template>
  <div>
    <!-- 这里是已办事件 -->
    <el-card class="common-page-box">
      <el-row type="flex" class="main-scerne" :gutter="8">
        <!-- 左边字典 -->
        <el-col :span="80">
          <el-form inline-message :show-message="false" :model="searchForm" label-width="80px" class="demo-ruleForm">
            <el-row type="flex" :gutter="8">
              <el-col :span="10">
                <el-form-item label="任务标题:" prop="name">
                  <el-input v-model="searchForm.title" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="任务类型:" prop="name">
                  <el-select v-model="searchForm.type" placeholder="请选择任务类型">
                    <el-option label="日常" value="日常" />
                    <el-option label="紧急" value="紧急" />
                    <el-option label="关注" value="关注" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="任务内容:" prop="name">
                  <el-input v-model="searchForm.content" />
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label-width="0" prop="name">
                  <el-button type="primary"  @click="searchDict">搜素</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="se-bd">
            <br>
            <br>

            <el-table :data="tableData" stripe border @selection-change="selectionChange">

              <el-table-column type="selection" width="55" />
              <el-table-column type="index" align="center" label="序号" width="70px" />
              <el-table-column prop="title" label="任务名称" width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="content" label="任务内容" width="150" align="center" show-overflow-tooltip />
              <el-table-column prop="type" label="任务类型" width="100" align="center" show-overflow-tooltip />
              <el-table-column
                prop="startTime"
                label="开始时间"
                width="180"
                header-align="center"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="endTime"
                label="结束时间"
                width="180"
                header-align="center"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="completeTime"
                label="完成时间"
                width="180"
                header-align="center"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="remark"
                label="备注"
                width="140"
                header-align="center"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="state"
                label="当前状态"
                width="120"
                header-align="center"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :style="{ color: getStatusColor(scope.row.state)}">
                    {{ scope.row.state }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="showTask(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              class="pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              :current-page="page.pageNum"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="page.pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>

        <el-dialog title="查看" :visible.sync="dialogVisible" width="35%">
          <el-form ref="form" :model="form" label-width="100px" disabled>
            <el-form-item label="任务标题:" prop="title">
              <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="任务内容:" prop="content">
              <el-input v-model="form.content" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item label="任务类型:" prop="type">
              <el-select v-model="form.type" placeholder="请选择任务类型">
                <el-option label="日常" value="日常" />
                <el-option label="紧急" value="紧急" />
                <el-option label="关注" value="关注" />
              </el-select>
            </el-form-item>
            <el-form-item label="计划时间:" prop="time">
              <el-date-picker
                v-model="form.time"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="3" />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

      </el-row>
    </el-card>

  </div>
</template>
<script>
import { selectDoneTask } from '@/api/task'

export default {
  data() {
    return {
      searchForm: {
        title: '',
        content: '',
        type: ''
      },
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 勾选的表格数据
      form: {
        id: '',
        title: '',
        type: '',
        remark: '',
        time: '',
        content: '',
        startTime: '',
        endTime: ''
      },
      dialogVisible: false
    }
  },
  mounted() {
    this.getDoneTaskList()
  },
  methods: {
    // 字典查询
    searchDict() {
      this.getDoneTaskList()
    },
    showTask(row) {
      this.form.title = row.title
      this.form.type = row.type
      this.form.remark = row.remark
      this.form.content = row.content
      this.form.time = [row.startTime, row.endTime]
      this.dialogVisible = true
    },
    // 获取字典列表
    getDoneTaskList() {
      const params = {
        ...this.page,
        ...this.searchForm
      }
      return new Promise((resolve) => {
        selectDoneTask(params).then((res) => {
          this.tableData = res.data.rows
          this.page.total = res.data.total
          resolve()
        })
      })
    },
    // 页数变化
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getDoneTaskList()
    },
    // 当前页数变化
    handleCurrentChange(currentPage) {
      this.page.pageNum = currentPage
      this.getDoneTaskList()
    },
    // 勾选项目变化
    selectionChange(val) {
      this.select = val
    },
    getStatusColor(state) {
      // 根据状态返回颜色
      // 实现根据状态判断颜色的逻辑
      if (state === '提前完成') {
        return '#5571c4'
      } else if (state === '正常完成') {
        return '#409eff'
      } else {
        return '#ff3e3e'
      }
    }
  }
}
</script>
<style scoped>
.main-scerne {
  /* width: 95%;
  height: 100%;
  margin-left: 2.5%;
  margin-top: 2.5%;
  box-shadow: 5px 10px 10px 5px #888888;
  border-radius: 10px;
  padding: 20px; */
}

.pagination {
  margin: 10px 0;
}
</style>
